<!-- src/views/Dashboard.vue -->
<template>
  <div>
    <div class="welcome-section">
      <div class="welcome-text">
        <h1>欢迎回来，管理员！</h1>
        <p>这是您的数据分析控制台，您可以在这里查看系统状态、管理数据和用户。</p>
      </div>
    </div>
    
    <div class="stats-container">
      <div class="stat-card">
        <div class="stat-icon" style="background: rgba(67, 97, 238, 0.1); color: var(--primary);">
          <i class="fas fa-users"></i>
        </div>
        <div class="stat-info">
          <div class="stat-title">总用户数</div>
          <div class="stat-value">2,842</div>
          <div class="stat-change change-up">
            <i class="fas fa-arrow-up"></i> 12.5% 较上月
          </div>
        </div>
      </div>
      
      <!-- 其他统计卡片... -->
    </div>
    
    <div class="card">
      <div class="card-header">
        <div class="card-title">最近活动</div>
      </div>
      <div class="card-body">
        <p>显示最近用户活动、系统日志或其他动态信息。</p>
      </div>
    </div>
    
    <!-- 销售数据统计卡片 -->
    <div class="card">
      <div class="card-header">
        <div class="card-title">销售数据统计</div>
        <div class="card-actions">
          <button @click="refreshChart" class="btn btn-sm btn-icon">
            <i class="fas fa-sync-alt"></i>
          </button>
        </div>
      </div>
      <div class="card-body">
        <div ref="chart" style="width: 100%; height: 400px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'DashboardView',
  
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chart) {
      this.chart.dispose();
    }
  },
  
  methods: {
    initChart() {
      // 初始化ECharts实例
      this.chart = echarts.init(this.$refs.chart);
      
      // 图表配置项
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {// 设置网格
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {//x轴设置
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          axisLine: {
            lineStyle: {
              color: '#e0e0e0'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {//y轴设置
          type: 'value',
          name: '销售额 (万元)',
          nameTextStyle: {
            color: '#666',
            padding: [0, 0, 0, -40]
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e0e0e0'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f5f5f5'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        series: [
          {
            name: '线上销售',
            type: 'bar',
            barWidth: '25%',
            data: [125, 148, 162, 135, 158, 189, 210],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#4371ee' },
                { offset: 1, color: '#6a93f5' }
              ])
            },
            label: {
              show: true,
              position: 'top',
              color: '#4371ee'
            }
          },
          {
            name: '线下销售',
            type: 'bar',
            barWidth: '25%',
            data: [98, 112, 135, 120, 145, 168, 185],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00c292' },
                { offset: 1, color: '#3de7c1' }
              ])
            },
            label: {
              show: true,
              position: 'top',
              color: '#00c292'
            }
          },
            {
            name: '总销售',
            type: 'bar',
            barWidth: '25%',
            data: [98, 112, 135, 120, 145, 168, 185],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#70c292' },
                { offset: 1, color: '#7007c1' }
              ])
            },
            label: {
              show: true,
              position: 'top',
              color: '#0fc292'
            }
          }
        ],
        legend: {
          data: ['线上销售', '线下销售','总销售'],
          bottom: 0,
          textStyle: {
            color: '#666'
          }
        }
      };
      
      // 应用配置项
      this.chart.setOption(option);
    },
    
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    
    refreshChart() {
      if (this.chart) {
        this.chart.dispose();
        this.initChart();
      }
    }
  }
}
</script>

<style scoped>
/* 添加卡片操作按钮样式 */
.card-actions {
  margin-left: auto;
}

.btn-icon {
  background: transparent;
  border: none;
  color: #6c757d;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  transition: color 0.3s;
}

.btn-icon:hover {
  color: var(--primary);
}
</style>